<template>
	<div class="app-columns-container">
		<div class="model-container">
			<modelOutlinePass></modelOutlinePass>
		</div>
		<div class="flexrbc app-bottom-list">
			<div class="app-columns-bottom">
				<faultList :data='dataList' :type="1"></faultList>
			</div>
			<div class="app-columns-bottom">
				<div class="bottom-title">场景还原</div>
				<div class="bottom-btn-container flexccc">
					<div class="bottom-btn">直梯坠落</div>
					<div class="bottom-btn">直梯冲顶</div>
					<div class="bottom-btn">直梯门系统开关异常</div>
					<div class="bottom-btn">直梯门系统强度退化</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import api from "@/api/http.js";
	import modelOutlinePass from '@/components/modelOutlinePass';
	
	import faultList from '../components/faultList.vue'
	 
	const configUrl = window.IP
	export default {
		name: "elevatorWarning",
		data() {
			return {
				 
				dataList: [{
						name: '曳引钢丝绳',
						level:1,
						id: 0
					}, {
						name: '右层门门扇',
						level:2,
						id: 1
					},
					{
						name: '对重导绳轮',
						level:3,
						id: 2
					},
					{
						name: '曳引导绳轮',
						level:4,
						id: 3
					},
					{
						name: '对重固定端钢丝绳',
						level:1,
						id: 4
					},
					{
						name: '轿厢左门',
						level:2,
						id: 5
					},
					{
						name: '曳引轮钢丝绳',
						level:2,
						id: 6
					},
					{
						name: '轿厢固定端钢丝绳',
						level:4,
						id: 7
					}

				],

			}
		},
		components: {
			faultList,modelOutlinePass
		},
		computed: {
			resourUrl() {
				return configUrl.resourUrl;
			},
		},
		beforeDestroy() { },
		created() {},
		mounted() { },
		methods: { }
	};
</script>

<style lang="scss" scoped>
	@import "@/styles/variables.scss";

	.app-right-container {
		background: rgba(0, 0, 0, 0);
		overflow: hidden;
	}

	.model-container {
		width: 100%;
		height: 55%;
		position: relative;
	}

	.app-bottom-list {
		width: 100%;
		height: 45%;

		.app-columns-bottom {
			width: 49%;
			height: 99%;

			.bottom-title {
				width: 100%;
				height: 50px;
				line-height: 50px;
				padding: 0 20px;
			}

			.bottom-btn-container {
				width: 100%;
				height: calc(100% - 50px);
			}

			.bottom-btn {
				background: #006afe;
				width: 60%;
				line-height: 40px;
				margin-top: 10px;
				text-align: center;
				border-radius: 4px;
			}
		}
	}

	#model-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#model-container canvas {
		width: 100% !important;
		height: 100%;
	}
</style>